<template>
  <div class="app-container">
    <div class="filter-container">
      <el-card >
        <div slot="header" class="clearfix">
          <span>{{$t('bs.systemOverview')}}</span>
        </div>
        <div style="display: flex">
          <div ref="pieRef" style="width: 400px;height: 400px" />
          <div style="flex: 1;display: flex;align-items: center;justify-content: space-between">
            <div ref="pieRef2" style="width: 200px;height: 200px" />
            <div ref="pieRef3" style="width: 200px;height: 200px" />
            <div ref="pieRef4" style="width: 200px;height: 200px" />
          </div>

        </div>
      </el-card>

      <el-row :gutter="24" style="margin-top: 10px">
        <el-col :span="16">
          <el-card>
            <div slot="header" class="clearfix">
              <span>{{$t('bs.FileStatus')}}</span>
            </div>
            <div style="height: 430px">
            <div ref="lineRef" style="width: 100%;height: 100%" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div slot="header" class="clearfix">
              <span>{{$t('bs.topDownloads')}}</span>
            </div>
            <div style="height: 430px">
              <el-table
                :data="down_ct"
                :show-header="false"
                style="width: 100%"
              >
                <el-table-column type="index" label="#" />

                <el-table-column show-overflow-tooltip
                  prop="name"
                  label="文件"
                />
                <el-table-column label="次数" width="90">
                  <template slot-scope="{$index,row}">
                    <span> {{ (row.up_count>row.down_ct)?row.up_count+" 次上传":row.down_ct+" 次下载" }}</span>
                  </template>
                </el-table-column>
              </el-table>

            </div>

          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 10px">
        <el-col :span="24">
          <el-card style="margin-top: 10px">
            <div slot="header" class="clearfix">
              <span>{{$t('bs.folderFileQuantity')}}</span>
            </div>
            <div style="height: 430px">
              <el-table
                :data="name_ct"
                style="width: 100%"
              >
                <el-table-column type="index" label="#" />

                <el-table-column
                  prop="name"
                  :label="$t('bs.folder')"
                />
                <el-table-column :label="$t('bs.fileNum')" width="200"  align="center">
                  <template slot-scope="{$index,row}">
                    <span> {{ row.sl }} </span>
                  </template>
                </el-table-column>
                <el-table-column label="文件大小(MB)" width="300" align="center">
                  <template slot-scope="{$index,row}">
                    <span> {{ row.f_size }} </span>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-card>
        </el-col>
        <el-col :span="12">

        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import { fetchList, createData, updateData, delData, getReport } from '@/api/common'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
import CyTreeSelect from '@/components/CyTreeSelect'
import md5 from 'js-md5' // secondary package based on el-pagination
import echarts from 'echarts'
export default {
  name: 'Log',
  components: { CyTreeSelect, Pagination },
  directives: { waves },
  data() {
    return {
      detail: null,
      pieChart: null,
      name_ct: [],
      down_ct: [],
      pieOption: {
        title: {
          text: this.$t('bs.storage'),
          subtext: this.$t('bs.usage'),
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [this.$t('bs.available'), this.$t('bs.used')]
        },
        label: {
          show: true,
          formatter(param) {
            // correct the percentage
            return param.name + ' (' + param.percent + '%)'
          }
        },
        series: [
          {
            name: '硬盘',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 266620420096, name: this.$t('bs.available') },
              { value: 70507540480, name: this.$t('bs.used') }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }

        ]
      },
      pieChart2: null,
      pieOption2: {
        title: {
          text: this.$t('bs.naturalResources'),
          subtext: this.$t('bs.usage'),
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [this.$t('bs.available'), this.$t('bs.used')]
        },
        label: {
          show: true,
          formatter(param) {
            // correct the percentage
            return param.name + ' (' + param.percent + '%)'
          }
        },
        series: [
          {
            name: this.$t('bs.naturalResources'),
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 266620420096, name: this.$t('bs.available'), itemStyle: { color: '#ffc858' }},
              { value: 70507540480, name: this.$t('bs.used'), itemStyle: { color: '#3ba272' }}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      pieChart3: null,
      pieOption3: {
        title: {
          text: this.$t('bs.processor'),
          subtext: this.$t('bs.usage'),
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [this.$t('bs.available'), this.$t('bs.used')]
        },
        series: [
          {
            name: 'cpu',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 266620420096, name: this.$t('bs.available'), itemStyle: { color: '#9a60b4' }},
              { value: 70507540480, name: this.$t('bs.used'), itemStyle: { color: '#ffc858' }}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      pieChart4: null,
      pieOption4: {
        title: {
          text: this.$t('bs.memory'),
          subtext: this.$t('bs.usage'),
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [this.$t('bs.available'), this.$t('bs.used')]
        },
        series: [
          {
            name: this.$t('bs.memory'),
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 266620420096, name: this.$t('bs.available'), itemStyle: { color: '#9a60b4' }},
              { value: 70507540480, name: this.$t('bs.used'), itemStyle: { color: '#5470c6' }}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      lineChart: null,
      lineOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line',
            smooth: true
          },
          {
            data: [],
            type: 'line',
            smooth: true
          }
        ]
      }
    }
  },
  created() {
    this.getList()
    setTimeout(() => {
      this.initPie()
    }, 500)
  },
  methods: {
    initPie() {
      this.pieChart3 = echarts.init(this.$refs.pieRef3)
      this.pieChart4 = echarts.init(this.$refs.pieRef4)
    },
    getList() {
      this.listLoading = true
      getReport().then(response => {
        console.log('报表', response)
        this.detail = response.data
        this.pieChart = echarts.init(this.$refs.pieRef)
        const diskinfo = this.detail.diskinfo
        const disk_used = diskinfo.total - diskinfo.free
        this.pieOption.series[0].data[0].value = diskinfo.free
        this.pieOption.series[0].data[1].value = disk_used
        this.pieChart.setOption(this.pieOption)

        this.pieChart2 = echarts.init(this.$refs.pieRef2)
        const hardware = this.detail.hardware
        const hardload = hardware.load
        const hardfree = (100 - hardload).toFixed(2)
        this.pieOption2.series[0].data[0].value = hardload
        this.pieOption2.series[0].data[1].value = hardfree
        this.pieChart2.setOption(this.pieOption2)

        this.pieChart3 = echarts.init(this.$refs.pieRef3)
        let cpusum = 0
        hardware.cpu.forEach((item) => {
          cpusum += item.percent
        })

        const cpuuse = (cpusum / hardware.cpu.length).toFixed(2)
        const cpufree = (100 - cpuuse).toFixed(2)
        this.pieOption3.series[0].data[0].value = cpuuse
        this.pieOption3.series[0].data[1].value = cpufree
        this.pieChart3.setOption(this.pieOption3)

        this.pieChart4 = echarts.init(this.$refs.pieRef4)

        this.pieOption4.series[0].data[0].value = hardware.mem.used
        this.pieOption4.series[0].data[1].value = hardware.mem.available
        this.pieChart4.setOption(this.pieOption4)

        const dow_log = this.detail.down_log
        const day = dow_log.map(item => item.date)
        const down = dow_log.map(item => item.down)
        const up = dow_log.map(item => item.up)

        this.lineChart = echarts.init(this.$refs.lineRef)
        this.lineOption.xAxis.data = day
        this.lineOption.series[0].data = down
        this.lineOption.series[1].data = up
        this.lineChart.setOption(this.lineOption)
        this.name_ct = response.data.name_ct
        this.down_ct = response.data.down_ct
      }).finally(() => {
        this.listLoading = false
      })
    }

  }
}
</script>
<style scoped="scoped" type="scss">
.pagination-container {
  padding: 0px;
  padding-bottom: 16px;
}

.hoverbutton {
  width: 70px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  border-radius: 3px;
}

.hoverbutton:hover {
  border: 1px solid #999999;
}

.setcheckbox .el-checkbox {
  margin-bottom: 10px;
}

.searchform .el-form-item {
  margin-bottom: 0px;
  min-width: 280px;
}
</style>

